<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>考试流程，考试中.</title>
</head>

<body>
  <header class="container">
    <div class="box">
      <div class="left">
        <div class="logo">

        </div>
        <span>蜗牛考试系统 </span>
      </div>
      <div class="right">
        <div class="circle">

        </div>
        <span id="firstName">蜗牛测试账号</span>
        <div class="logo"></div>
      </div>
    </div>
  </header>
  <main class="examProcess container inExam">
    <header>
      <a href="#"><span class="back-icon"></span> <span>返回【考试中...】</span>
      </a>
      <h3 id="title">2021年第三季度Vue.js知识模拟考试</h3>
    </header>
    <div class="inExam-questions">
      <div class="left-questions carousel-inner noAnswer">
        <!-- 每道题目动态生成，class动态生成 -->
        <div class="carousel-item question1 active">
          <h3>
            <span>第一题单选题</span>
            <div>第<span>1</span> 题/共<span>30</span>题</div>
          </h3>
          <dl class="options">
            <dt>题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目</dt>
            <dd><span>A</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>B</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>C</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>D</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
          </dl>
          <div class="begin-test marhT76"> <button class="testBtn">下一题</button></div>
        </div>
        <div class="carousel-item question2">
          <h3>
            <span>第二题单选题</span>
            <div>第<span>1</span> 题/共<span>30</span>题</div>
          </h3>
          <dl class="options">
            <dt>题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目</dt>
            <dd><span>A</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>B</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>C</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>D</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
          </dl>

          <div class="begin-test marhT76"> <button class="testBtn">下一题</button></div>
        </div>
        <div class="carousel-item question3">
          <h3>
            <span>第三题单选题</span>
            <div>第<span>1</span> 题/共<span>30</span>题</div>
          </h3>
          <dl class="options">
            <dt>题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目</dt>
            <dd><span>A</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>B</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>C</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>D</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
          </dl>
          <div class="begin-test marhT76"> <button class="testBtn">下一题</button></div>
        </div>
        <div class="carousel-item question4">
          <h3>
            <span>第四题单选题</span>
            <div>第<span>1</span> 题/共<span>30</span>题</div>
          </h3>
          <dl class="options">
            <dt>题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目</dt>
            <dd><span>A</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>B</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>C</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>D</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
          </dl>
          <div class="begin-test marhT76"> <button class="testBtn">下一题</button></div>
        </div>
        <div class="carousel-item question5">
          <h3>
            <span>第五题单选题</span>
            <div>第<span>1</span> 题/共<span>30</span>题</div>
          </h3>
          <dl class="options">
            <dt>题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目</dt>
            <dd><span>A</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>B</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>C</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>D</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
          </dl>
          <div class="begin-test marhT76"> <button class="testBtn">下一题</button></div>
        </div>
        <div class="carousel-item question6">
          <h3>
            <span>第六题单选题</span>
            <div>第<span>1</span> 题/共<span>30</span>题</div>
          </h3>
          <dl class="options">
            <dt>题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目</dt>
            <dd><span>A</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>B</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>C</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
            <dd><span>D</span><span>答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案</span></dd>
          </dl>
          <div class="begin-test marhT76"> <button class="testBtn">下一题</button></div>
        </div>
      </div>
      <div class="right-num">
        <p><span>剩余时间:</span><span class="corR" id="timer">04:59</span></p>
        <p><span>考试类型:</span><span id="testType">模拟</span></p>
        <p class="answer-card"><span>答题卡:</span><span class="corR">未答13题</span></p>
        <div class="anwer-btns" id="anwer-btns">
          <!-- button动态生成时候，对应id也动态生成 -->
          <button class="inTheAns first" id="question1-btn" type="button">1
          </button>
          <button class="" id="question2-btn" type="button">2</button>
          <button class="" id="question3-btn" type="button">3</button>
          <button class="" id="question4-btn" type="button" data-target="#subjects">4</button>
          <button class="" id="question5-btn" type="button" data-target="#subjects">5</button>
          <button class="" id="question6-btn" type="button" data-target="#subjects">6</button>
        </div>
        <!-- <div class="hand-paper">立即交卷</div> -->
        <!-- 答题 -->
        <div class="dati">
          <button type="button" class="hand-paper" class="btn btn-primary" data-toggle="modal"
            data-target="#exampleModal">
            立即交卷
          </button>
          <!-- Modal -->
          <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel"> 交卷确认</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="jiaojuan">
                    <div class="text">
                      总题数: <span id="allQues">10</span>
                    </div>
                    <div class="text">
                      已答题: <span id="finishQues">10</span>
                    </div>
                    <div class="textred">
                      未答题: <span id="unfinishQues">10</span>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">再检查下</button>
                  <button type="button" class="btn btn-primary" id="submitTest">交卷</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</body>

</html>